Settings
Hi! Here some our recommendations to get the best out of BLACKBOX:
Be as clear as possible
End the question in what language you want the answer to be, e.g: ‘connect to mongodb in python
or you can just
Watch tutorial video
Here are some suggestion (choose one):
Write a function that reads data from a json file
How to delete docs from mongodb in phyton
Connect to mongodb in nodejs
send refresh
Blackbox AI Chat is in beta and Blackbox is not liable for the content generated. By using Blackbox, you acknowledge that you agree to agree to Blackbox's Terms and Privacy Policy

CHALLENGE #1: Profile Card (v1)

Firat Atalay
2 min readJust now
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

function App() {
return (
<div className="card">
<Avatar />
<div className="data">
<Intro />
{/* Should contain one Skill component
for each web dev skill that you have,
customized with props */}
<SkillList />
</div>
</div>
);
}

function Avatar() {
return <img className="avatar" src="jonas.jpeg" alt="Firat Atalay" />;
}

function Intro() {
return (
<div>
<h1>Firat Atalay </h1>
<p>
Full-stack web developer and teacher at Udemy. When not coding or
preparing a course, I like to play board games, to cook (and eat), or to
just enjoy the Portuguese sun at the beach.
</p>
</div>
);
}

function SkillList() {
return (
<div className="skill-list">
<Skill skill="React" emoji="💪" color="blue" />
<Skill skill="HTML+CSS" emoji="💪" color="orange" />
<Skill skill="JavaScript" emoji="💪" color="yellow" />
<Skill skill="Svelte" emoji="👶" color="orangered" />
</div>
);
}

function Skill(props) {
return (
<div className="skill" style={{ backgroundColor: props.color }}>
<span>{props.skill}</span>
<span>{props.emoji}</span>
</div>
);
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
<StrictMode>
<App />
</StrictMode>
);

OUTPUT: